<div id="ctxtree" style="margin: 30px" ng-init="load_ctx()">
    <h4>Contexts Tree</h4>
    <!-- Nested list template -->
    <script type="text/ng-template" id="items_renderer.html">
        <div ui-tree-handle data-nodrag class="ctx-node">
            <a data-nodrag ng-click="toggle(this)">
            <span style="margin-right: 10px" class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}">
            </span></a>
            <span class="ctx-name" ng-context-menu="menuOptions">{{item.name}}</span>
            <span class="glyphicon glyphicon-ok" ng-show="isActive(this)" style="margin-left: 5px"></span>
        </div>
        <ol ui-tree-nodes="options" ng-model="item.items" ng-class="{hidden: collapsed}">
            <li ng-repeat="item in item.items" ui-tree-node ng-include="'items_renderer.html'">
            </li>
        </ol>
    </script>
    <div ui-tree="options">
        <ol ui-tree-nodes ng-model="list" >
            <li ng-repeat="item in list" ui-tree-node ng-include="'items_renderer.html'"></li>
        </ol>
    </div>
</div>
